import { t } from 'i18next'
import { Wrap, WrapFooter } from './style'
import { CommonCard } from './components/common'
import { Button, Modal } from '@kedacom/react-next'
import { MeetingCardProps, MeetingEntity } from '../interface'
import { fetchDeleteMeeting } from '@/api/meetingList'
import Alert, { confirmModal } from '@/components/Alert'
import shallow from 'zustand/shallow'
import { useStore as useMeetingScheduleStore } from '../store'
import { useGlobalStore } from '@/store/global'

export function AuditCard(props: MeetingCardProps) {
	const { AjaxFetchAuditMeetingList, AjaxFetchAppointmentMeetingList } = useMeetingScheduleStore(
		(state) => ({
			update: state.update,
			AjaxFetchAuditMeetingList: state.AjaxFetchAuditMeetingList,
			AjaxFetchAppointmentMeetingList: state.AjaxFetchAppointmentMeetingList,
		}),
		shallow
	)
	const getApprovedBy = (meeting: MeetingEntity) => {
		let _audit_person_list = meeting.audit_person_list || []
		let _arr_audit_name = []
		for (let i = 0; i < _audit_person_list.length; i++) {
			let _current = _audit_person_list[i]
			_current.name && _arr_audit_name.push(_current.name)
		}
		return t('审批中 （当前审批人{{name}}）', { name: _arr_audit_name.join(',') })
	}
	const getAuditDesc = (type?: number, desc?: string) => {
		switch (type) {
			case 4:
				return t('已超出会议开始时间，审批者仍未进行审批')
			case 3:
				return t('视频会议资源紧张')
			case 2:
				return t('会议室资源紧张')
			case 1:
				return t('会议时间冲突')
			default:
				return desc == null ? '' : desc
		}
	}
	/**获取审批结果 */
	const getAuditResult = (meeting: MeetingEntity) => {
		const { state, audit } = meeting
		const { audit_at, desc_type, desc, audit_name } = audit
		/**审批时间加结果 */
		let time_and_result = audit_at?.substring(0, 16) + ' ' + t('未审批通过')
		/**审批原因 */
		let auditDesc = getAuditDesc(desc_type, desc)
		if (state === 7 /**审批被拒绝 */) {
			return (
				<>
					{audit_name !== '' && <div className="meeting_card_audit_name">{audit_name}</div>}
					{audit_name !== '' && <div className="meeting_card_split">/</div>}
					<div className="meeting_card_audit_detail">{time_and_result}</div>
					{auditDesc !== '' && <span>（</span>}
					{auditDesc !== '' && (
						<div className="meeting_card_audit_desc" title={auditDesc}>
							{auditDesc}
						</div>
					)}
					{auditDesc !== '' && <span>）</span>}
				</>
			)
		} else if (state === 6 /**审批中*/) {
			let auditStr = getApprovedBy(meeting)
			return (
				<>
					<span className="audit-person-str" title={auditStr}>
						{auditStr}
					</span>
				</>
			)
		}
	}
	/**删除会议 */
	const handleActionDelMeeting = (meeting: MeetingEntity) => {
		confirmModal({
			msg: <div>{t('您确定要取消该会议吗？')}</div>,
			onOk: async () => {
				const res = await fetchDeleteMeeting(meeting.meeting_id)
				if (res.success) {
					AjaxFetchAuditMeetingList()
					AjaxFetchAppointmentMeetingList()
				} else {
					if (res.description) {
						Alert(res.description, function () {
							AjaxFetchAuditMeetingList()
							AjaxFetchAppointmentMeetingList()
						})
					} else {
						Alert(t('操作失败!'))
					}
				}
			},
		})
	}
	/**获取操作的按钮*/
	const getActionBtn = (meeting: MeetingEntity) => {
		return (
			<>
				{meeting.state === 7 && (
					<Button
						className="btn"
						onClick={() => {
							const user = useGlobalStore.getState().user
							if (!user?.enable_meeting) {
								Alert(t('无会议管理权限，请通知管理员'))
								return false
							}
							handleActionDelMeeting(meeting)
						}}
					>
						{t('删除')}
					</Button>
				)}
			</>
		)
	}
	return (
		<>
			<Wrap className={props.className}>
				<CommonCard
					entity={props.entity}
					orderArr={props.orderArr}
					is_show_share={false}
					is_show_vcs={false}
					is_show_edit={!!props.entity.is_edit}
					is_show_e164={false}
					is_show_domain_name={false}
					is_upload_file={true}
					file_num={props.entity.file_num ?? 0}
				></CommonCard>
				<WrapFooter className="meeting-card-footer">
					<div className="meeting_card_audit_result">{getAuditResult(props.entity)}</div>
					<div className="meeting_card_manager_option">{getActionBtn(props.entity)}</div>
				</WrapFooter>
			</Wrap>
		</>
	)
}
